<template>
  <div id="user">
    <div class="user-main">
      <div class="title">
        <HomeTitle title="用户列表" Eng="Users List"></HomeTitle>
      </div>
      <div class="headerBtns">
        <el-select
          v-model="type"
          placeholder="用户类型"
          style="margin-right: 20px"
        >
          <el-option
            v-for="(v, k) in types"
            :key="k"
            :label="v.label"
            :value="v.id"
          ></el-option>
        </el-select>
        <el-select v-model="department" placeholder="科室">
          <el-option
            v-for="(v, k) in departments.list"
            :key="k"
            :label="v.DepartmentName"
            :value="v.DepartmentId"
          ></el-option>
        </el-select>
      </div>
      <div class="content">
        <template v-if="loading">
          <myLoading />
        </template>
        <template v-else>
          <div class="btns">
            <el-button type="primary" @click="add">添加用户</el-button>
          </div>
          <el-table :data="departments.tableData" style="width: 100%" header-cell-class-name="tableColor" cell-class-name="tableColor">
            <el-table-column
              type="index"
              :index="calcIndex"
              prop="date"
              label="序号"
              width="80"
            />
            <el-table-column prop="RoleName" label="用户类型" width="180" />
            <el-table-column prop="UserAccount" label="用户账号" width="180" />
            <el-table-column prop="UserName" label="姓 名" min-width="180" />
            <el-table-column label="操作" width="180">
              <template #default="s">
                <el-button
                  type="text"
                  v-if="s.row.is_stop"
                  style="color: #18ad79"
                  @click="stop(s.row)"
                  >启用</el-button
                >
                <el-button
                  type="text"
                  v-else
                  style="color: red"
                  @click="stop(s.row)"
                  >禁用</el-button
                >
                <el-button type="text" @click="toDetail(s.row)">查看</el-button>
                <el-button type="text" @click="update(s.row)">修改</el-button>
                <el-button type="text" style="color: red" @click="del(s.row)"
                  >重置</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div class="footer">
        <el-pagination
          v-model:currentPage="params.PageIndex"
          :page-size="params.PageSize"
          :small="true"
          :background="true"
          layout=" prev, pager, next"
          :total="departments.count"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog v-model="showForm" :title="userForm.title" width="30%" draggable>
      <el-form
        :model="userForm.form"
        :rules="userForm.rules"
        ref="form"
        label-width="100px"
      >
        <el-form-item label="账号" prop="UserAccount">
          <el-input
            v-model="userForm.form.UserAccount"
            placeholder="账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="UserName">
          <el-input
            v-model="userForm.form.UserName"
            placeholder="名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="PhoneNumber">
          <el-input
            v-model="userForm.form.PhoneNumber"
            maxlength="11"
            placeholder="电话号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="账号类型" prop="RoleType">
          <!-- <el-input v-model="userForm.form.UserAccount"></el-input> -->
          <el-select v-model="userForm.form.RoleType" placeholder="账号类型">
            <el-option
              v-for="(v, k) in types"
              :key="k"
              :label="v.label"
              :value="v.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门" prop="DepartmentId">
          <!-- <el-input v-model="userForm.form.UserAccount"></el-input> -->
          <el-select v-model="userForm.form.DepartmentId" placeholder="科室">
            <el-option
              v-for="(v, k) in departments.list"
              :key="k"
              :label="v.DepartmentName"
              :value="v.DepartmentId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showForm = false">取消</el-button>
          <el-button
            :loading="userForm.loading"
            type="primary"
            @click="submit(form)"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { onMounted, onUnmounted, reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import * as OfficeApi from "@/api/office";
import * as UserApi from "@/api/user";
import { storeUser } from "@/store/user";
import HomeTitle from "@/components/title.vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
export default {
  name: "",
  components: {
    HomeTitle,
  },
  setup(props, ctx) {
    const user = storeUser();
    const router = useRouter();
    const department = ref("");
    const type = ref("");
    const loading = ref(false);
    const types = reactive([
      { id: 0, label: "个人账号" },
      { id: 1, label: "科室账号" },
      { id: 2, label: "局领导" },
      { id: 3, label: "系统管理员" },
      { id: 4, label: "审核员" },
    ]);
    const departments = reactive({
      list: [],
      tableData: [{}, {}, {}],
      count: 0,
    });
    const handleSizeChange = () => {};
    const handleCurrentChange = (v) => {
      params.PageIndex = v;
      getTableDatas();
    };
    const getDepartments = async () => {
      let { data } = await OfficeApi.getList();
      departments.list = data.UserData;
    };
    const params = reactive({
      PageSize: "10",
      PageIndex: "1",
      CurrentUserAccount: "",
      queryUserName: "",
      queryDepartmentID: "",
      queryRoleType: "",
      query_is_stop: "",
    });
    const userForm = reactive({
      form: {
        UserAccount: "",
        UserName: "",
        PhoneNumber: "",
        RoleType: "",
        DepartmentId: "",
      },
      title: "",
      type: "",
      loading: false,
      rules: {
        UserAccount: [
          { required: true, message: "请填写账号", trigger: "blur" },
        ],
        UserName: [
          { required: true, message: "请填写用户名", trigger: "blur" },
        ],
        PhoneNumber: [
          { required: true, message: "请填写电话号码", trigger: "blur" },
        ],
        RoleType: [
          { required: true, message: "请选择用户类型", trigger: "blur" },
        ],
        // DepartmentId: [
        //   { required: true, message: "请选择部门", trigger: "blur" },
        // ],
      },
    });
    const form = ref("");
    const showForm = ref(false);
    const getTableDatas = async () => {
      loading.value = true;
      params.CurrentUserAccount = user.UserAccount;
      let { data } = await UserApi.getList(params);
      departments.tableData = data.UserData.userlist;
      departments.count = data.UserData.Count;

      loading.value = false;
    };
    onMounted(() => {
      getDepartments();
      getTableDatas();
    });
    const toDetail = (v) => {
      router.push("/manage/userDetail?account=" + v.UserAccount);
    };
    const add = (v) => {
      userForm.title = "新增";
      userForm.type = "add";
      userForm.form = {
        UserAccount: "",
        UserName: "",
        PhoneNumber: "",
        RoleType: "",
        DepartmentId: "",
      };
      showForm.value = true;
      getTableDatas();
    };
    const update = (v) => {
      userForm.type = "edit";
      userForm.title = "修改";
      userForm.form = v;
      showForm.value = true;

      getTableDatas();
    };
    const del = (v) => {
      ElMessageBox.confirm("确认重置？", "重置", {
        type: "warning",
      })
        .then(async () => {
          let { data } = await UserApi.reset({
            UserAccount: v.UserAccount,
          });
          if (data.Status != 0) return;
          ElNotification({
            type: "success",
            title: "重置密码",
            message: "已重置！",
          });
          getTableDatas();
        })
        .catch(() => {});
    };
    const submit = (v) => {
      if (!v) return;
      v.validate(async (s) => {
        if (s) {
          userForm.loading = true;
          if (userForm.type == "add") {
            let { data } = await UserApi.addUser(userForm.form);
            if (data.Status == 0) {
              ElNotification({
                type: "success",
                title: "新建",
                message: "新建用户成功！",
              });
              showForm.value = false;
            } else {
              ElNotification({
                type: "error",
                title: "新建",
                message: "新建用户失败！",
              });
            }
          } else {
            let { data } = await UserApi.saveUser(userForm.form);
            if (data.Status == 0) {
              ElNotification({
                type: "success",
                title: "修改",
                message: "修改用户成功！",
              });
              showForm.value = false;
            } else {
              ElNotification({
                type: "error",
                title: "修改",
                message: "修改用户失败！",
              });
            }
          }
          userForm.loading = false;
        }
      });
    };
    const stop = async (v) => {
      let { data } = await UserApi.stopUser({
        UserAccount: v.UserAccount,
        stop: v.is_stop == 0 ? 1 : 0,
      });
      if (data.Status != 0) return;
      ElNotification({
        type: "success",
        title: v.is_stop == 0 ? "禁用" : "启用",
        message: "操作成功!",
      });
      getTableDatas();
    };
    const calcIndex = (index) => {
      return (params.PageIndex - 1) * params.PageSize + index + 1;
    };
    return {
      calcIndex,
      add,
      stop,
      userForm,
      form,
      showForm,
      department,
      type,
      loading,
      types,
      departments,
      handleSizeChange,
      submit,
      params,
      handleCurrentChange,
      toDetail,
      update,
      del,
    };
  },
};
</script>
<style lang="scss">
</style>
<style scoped lang="scss">

::v-deep(.el-form-item__label) {
  color: #fff !important;
}
::v-deep(.el-textarea__inner) {
  background: transparent !important;
  color: #fff !important;
}
::v-deep(.el-dialog) {
  background: #2f3042 !important;
  color: #fff !important;
}
::v-deep(.el-dialog__title) {
  color: #fff !important;
}

::v-deep(.el-input__wrapper) {
  background: transparent !important;
  color: #fff !important;
}
::v-deep(.el-table) {
  background: transparent !important;
  color: #fff !important;
}
::v-deep(.el-table tr) {
  background: transparent !important;
  color: #fff !important;
}
::v-deep(.el-table__cell) {
  background: transparent !important;
  color: #fff !important;
}
::v-deep(.el-input__inner) {
  // background: transparent !important;
  color: #fff !important;
}
::v-deep(.el-table__body-wrapper) {
  height: 100%;
}
::v-deep(.el-table__inner-wrapper) {
  height: 100%;
}
#user {
  position: relative;
  width: 100%;
  height: 100%;
  border-top-left-radius: 30px;
  overflow-y: auto;
  background: var(--box-bg-color);

  .user-main {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 30px 20px;
    box-sizing: border-box;
    .title {
      margin-bottom: 40px;
    }
    .content {
      margin-top: 20px;
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .el-table {
        flex: 1;
      }
    }
    .footer {
      margin-top: 20px;
      // text-align: right;
      align-self: flex-end;
    }
  }
}
</style>
